<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>供应商分类</title>
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">

    <style type="text/css">
      [v-cloak] { display: none }
      .bd-light { border: 1px solid rgba(0, 0, 0, .1) }
      div.q-if-inner div.q-input-target {line-height: 24px}  /* 兼容 ie 的 */
      /* .q-timeline-content { padding-top: 0!important } */
      .q-timeline-content h6{ display: none }
    </style>
  </head>
  <body>
    <div id="q-supplierClassify" v-cloak>
      <q-card class="bg-white no-shadow full-width">
        <q-card-main class="relative-position">
          <q-tabs 
            v-model="selectedTab" 
            color="primary"
            inverted 
            @select="getTreeData">
            <q-tab 
              style="width:100px" 
              v-for="(item, index) in tabData" 
              :default="index == 0? true: false" 
              slot="title" 
              icon="merge_type"
              :name="item.id" 
              :label="item.name"></q-tab>
          </q-tabs>
        </q-card-main>
      </q-card>
      <q-card class="bg-white no-shadow full-width" v-if="tabData.length > 0">
        <q-card-main class="row justify-start gutter-sm">
          <q-card class="col-lg-3 col-md-4 col-sm-4 col-xs-12 no-shadow">
            <q-card-main class="q-pa-sm q-mt-xs q-mr-sm relative-position">
              <q-inner-loading :visible="visible">
                <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
              </q-inner-loading>
              <q-search v-model="searchNodes"></q-search>
              <q-tree
                class="q-mt-md tree-styl"
                color="secondary"
                :nodes="supplierLevelData"
                node-key="value"
                :filter="searchNodes"
                no-results-label="没有找到结果"
                :expanded.sync="expandedNodes"
                :selected.sync="nodeSelected"
                tickable
                tick-strategy="leaf"
                :ticked.sync="nodeTicked"
              >
                <!-- 节点插槽 -->
                <div slot="header-right" slot-scope="prop">
                  {{ prop.node.label }}
                  <!-- 根目录 -->
                  <q-context-menu>
                    <div class="q-pa-xs" v-if="!prop.node.isRoot">
                      <q-btn
                        flat
                        v-close-overlay
                        color="primary"
                        size="sm"
                        @click="openAddLevelModal(prop.node, 4)"
                      >
                        <span>{{ $t("新增父级") }}</span>
                      </q-btn>
                    </div>
                    <div class="q-pa-xs">
                      <q-btn
                        flat
                        v-close-overlay
                        color="primary"
                        size="sm"
                        @click="openAddLevelModal(prop.node, 3)"
                      >
                        <span>新增下级</span>
                      </q-btn>
                    </div>
                    <div class="q-pa-xs" v-if="!prop.node.isRoot">
                      <q-btn
                        flat
                        v-close-overlay
                        color="primary"
                        size="sm"
                        @click="openAddLevelModal(prop.node, 2)"
                      >
                        <span>新增上级</span>
                      </q-btn>
                    </div>
                    <div class="q-pa-xs" v-if="!prop.node.isRoot">
                      <q-btn
                        flat
                        v-close-overlay
                        color="primary"
                        size="sm"
                        @click="openAddLevelModal(prop.node, 1)"
                      >
                        <span>新增平级</span>
                      </q-btn>
                    </div>
                    <div class="q-pa-xs" v-if="!prop.node.isRoot">
                      <q-btn
                        color="secondary"
                        flat
                        v-close-overlay
                        size="sm"
                        @click="openEditLevelModal(prop.node)"
                      >
                        <span>编辑</span>
                      </q-btn>
                    </div>
                    <div class="q-pa-xs" v-if="!prop.node.isRoot">
                      <q-btn
                        flat
                        v-close-overlay
                        color="negative"
                        size="sm"
                        @click="deleteNodeComfirm(prop.node)"
                      >
                        <span>删除</span>
                      </q-btn>
                    </div>
                  </q-context-menu>
                </div>
              </q-tree>
            </q-card-main>
          </q-card>
          <!-- 右侧 -->
          <q-card class="col-lg-9 col-md-8 col-sm-8 col-xs-12 no-shadow" v-if="nodeSelected != 0 && nodeSelected != null">
            <q-card-main class="q-pa-sm q-mt-xs q-mr-sm relative-position">
              <div class="row gutter-x-sm gutter-y-sm">
                <q-field 
                  class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                  <q-select
                    :float-label="$t('任务类型')"
                    :options="taskTypeOptions"
                    v-model="infoForm.taskType"></q-select>
                </q-field>
                <q-field 
                  class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                  <q-input
                    :float-label="$t('任务规则')"
                    v-model="infoForm.taskRules"></q-input>
                </q-field>
                <q-field 
                  class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                  <q-select
                    :float-label="$t('执行人')"
                    multiple
                    filter
                    filter-placeholder="输入查询"
                    clearable
                    :options="roleOptions"
                    v-model="infoForm.responsibles"></q-select>
                </q-field>
                <!-- <q-field 
                  class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                  <q-select
                    :float-label="$t('审批人')"
                    multiple
                    filter
                    filter-placeholder="输入查询"
                    clearable
                    :options="roleOptions"
                    v-model="infoForm.accountable"></q-select>
                </q-field> -->
                <q-field 
                  class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                  <q-select
                    :float-label="$t('观察者')"
                    multiple
                    filter
                    filter-placeholder="输入查询"
                    clearable
                    :options="roleOptions"
                    v-model="infoForm.consulted"></q-select>
                </q-field>
                <q-field 
                  class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                  <q-select
                    :float-label="$t('通知者')"
                    multiple
                    filter
                    filter-placeholder="输入查询"
                    clearable
                    :options="roleOptions"
                    v-model="infoForm.informed"></q-select>
                </q-field>
              </div>
              <div class="row justify-start q-mt-sm">
                <div class="col-lg-6 col-md-6 col-sm-8 col-xs-12">
                  <q-timeline color="secondary">
                    <q-timeline-entry
                      subtitle="创建审批"
                    >
                      <div>
                        <q-btn size="xs" flat color="secondary" @click="openAddEnterRoleModal">新增</q-btn>
                      </div>
                    </q-timeline-entry>
                    <q-timeline-entry
                      v-for="(step, index) in steps"
                      :key="step"
                      :subtitle="step"
                    >
                      <div>
                        <q-btn size="xs" flat color="secondary" @click="openInsertEnterRoleModal(step)">插入</q-btn>
                        <q-btn size="xs" flat color="secondary" @click="openEditEnterRoleModal(step, index)">编辑</q-btn>
                        <q-btn size="xs" flat color="negative" @click="deleteEnterRoleConfirm(step, index)">删除</q-btn>
                      </div>
                    </q-timeline-entry>
                  </q-timeline>
                </div>
              </div>
              <div class="row">
                <q-btn color="primary" @click="submitHandler">提交</q-btn>
              </div>
            </q-card-main>
          </q-card>
          <q-card class="col-lg-9 col-md-8 col-sm-8 col-xs-12 no-shadow" v-else>
            <q-card-main class="q-pa-sm q-mt-xs q-mr-sm relative-position">
              <div>
                <q-icon name="help" color="light"></q-icon>
                在当前页面下，点击左侧任务节点，您可以对各阶段供应商的任务进行维护。
              </div>
            </q-card-main>
          </q-card>
        </q-card-main>
      </q-card>
      <!-- tab modal -->
      <q-modal no-backdrop-dismiss v-model="tabAddOrEditModal" :content-css="{minWidth: '66vw', minHeight: '550px',borderRadius: '4px'}">
        <q-modal-layout>
          <q-toolbar slot="header" color="white">
            <q-toolbar-title class="text-dark">
              {{ addOrEdit === 0 ? $t("新增") : $t("编辑")  }}
            </q-toolbar-title>
            <q-btn flat @click="tabAddOrEditModal = false">
              <q-icon name="close" color="dark"></q-icon>
            </q-btn>
          </q-toolbar>
          <q-card class="q-px-md q-py-sm bg-white no-shadow full-width">
            <q-card-main class="row gutter-x-md gutter-y-sm">
              <q-field 
                :error="$v.tabAddOrEditForm.name.$error"
                error-label="名称不能为空"
                class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <q-input
                  :float-label="$t('名称')"
                  @blur="$v.tabAddOrEditForm.name.$touch"
                  v-model="tabAddOrEditForm.name"></q-input>
              </q-field>
            </q-card-main>
          </q-card>
          <q-toolbar slot="footer" color="white" class="row justify-end">
            <q-btn
              flat
              color="primary"
              @click="tabAddOrEditModal = false">{{$t("取消")}}</q-btn>
            <q-btn
              flat
              :loading="btnLoading"
              color="primary"
              v-if="addOrEdit === 0"
              @click="saveAddTabHandler">{{$t("保存")}}</q-btn>
            <q-btn
              flat
              :loading="btnLoading"
              color="primary"
              v-else
              @click="saveEditTabHandler">{{$t("保存")}}</q-btn>
          </q-toolbar>
        </q-modal-layout>
      </q-modal>
      <!-- tree add modal -->
      <q-modal no-backdrop-dismiss v-model="nodeAddModal" :content-css="{minWidth: '66vw', minHeight: '550px',borderRadius: '4px'}">
        <q-modal-layout>
          <q-toolbar slot="header" color="white">
            <q-toolbar-title class="text-dark">
              {{ addOrEdit === 0 ? $t("新增") : $t("编辑")  }}
            </q-toolbar-title>
            <q-btn flat @click="nodeAddModal = false">
              <q-icon name="close" color="dark"></q-icon>
            </q-btn>
          </q-toolbar>
          <q-card class="q-px-md q-py-sm bg-white no-shadow full-width">
            <q-card-main class="row gutter-x-md gutter-y-sm">
              <q-field 
                :error="$v.nodeAddForm.name.$error"
                error-label="名称不能为空"
                class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <q-input
                  :float-label="$t('名称')"
                  @blur="$v.nodeAddForm.name.$touch"
                  v-model="nodeAddForm.name"></q-input>
              </q-field>
            </q-card-main>
          </q-card>
          <q-toolbar slot="footer" color="white" class="row justify-end">
            <q-btn
              flat
              color="primary"
              @click="nodeAddModal = false">{{$t("取消")}}</q-btn>
            <q-btn
              flat
              :loading="btnLoading"
              color="primary"
              v-if="addOrEdit === 0"
              @click="saveAddNodeHandler">{{$t("保存")}}</q-btn>
            <q-btn
              flat
              :loading="btnLoading"
              color="primary"
              v-else
              @click="saveEditNodeHandler">{{$t("保存")}}</q-btn>
          </q-toolbar>
        </q-modal-layout>
      </q-modal>
      <!-- tree edit modal -->
      <q-modal no-backdrop-dismiss v-model="nodeEditModal" :content-css="{minWidth: '66vw', minHeight: '550px',borderRadius: '4px'}">
        <q-modal-layout>
          <q-toolbar slot="header" color="white">
            <q-toolbar-title class="text-dark">
              {{ addOrEdit === 0 ? $t("新增") : $t("编辑")  }}
            </q-toolbar-title>
            <q-btn flat @click="nodeEditModal = false">
              <q-icon name="close" color="dark"></q-icon>
            </q-btn>
          </q-toolbar>
          <q-card class="q-px-md q-py-sm bg-white no-shadow full-width">
            <q-card-main class="row gutter-x-md gutter-y-sm">
              <q-field 
                :error="$v.nodeEditForm.name.$error"
                error-label="名称不能为空"
                class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <q-input
                  :float-label="$t('名称')"
                  @blur="$v.nodeEditForm.name.$touch"
                  v-model="nodeEditForm.name"></q-input>
              </q-field>
              <q-field 
                v-if="addOrEdit == 1"
                :error="$v.nodeEditForm.arraynumber.$error"
                :error-label="$v.nodeEditForm.arraynumber.required? ($v.nodeEditForm.arraynumber.mustNumber? '': '必须为数字'): '不能为空'"
                class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <q-input
                  :float-label="$t('排序')"
                  @blur="$v.nodeEditForm.arraynumber.$touch"
                  v-model="nodeEditForm.arraynumber"></q-input>
              </q-field>
            </q-card-main>
          </q-card>
          <q-toolbar slot="footer" color="white" class="row justify-end">
            <q-btn
              flat
              color="primary"
              @click="nodeEditModal = false">{{$t("取消")}}</q-btn>
            <q-btn
              flat
              :loading="btnLoading"
              color="primary"
              v-if="addOrEdit === 0"
              @click="saveAddNodeHandler">{{$t("保存")}}</q-btn>
            <q-btn
              flat
              :loading="btnLoading"
              color="primary"
              v-else
              @click="saveEditNodeHandler">{{$t("保存")}}</q-btn>
          </q-toolbar>
        </q-modal-layout>
      </q-modal>
      <!-- 新增审批流程 modal -->
      <q-modal no-backdrop-dismiss v-model="enterRoleAddOrEditModal" :content-css="{minWidth: '66vw', minHeight: '550px',borderRadius: '4px'}">
        <q-modal-layout>
          <q-toolbar slot="header" color="white">
            <q-toolbar-title class="text-dark">
              {{ addOrEdit == 0 ? $t("新增") : (addOrEdit == 1? $t("编辑") : $t("插入新增"))  }}
            </q-toolbar-title>
            <q-btn flat @click="enterRoleAddOrEditModal = false">
              <q-icon name="close" color="dark"></q-icon>
            </q-btn>
          </q-toolbar>
          <q-card class="q-px-md q-py-sm bg-white no-shadow full-width">
            <q-card-main class="row gutter-x-md gutter-y-sm">
              <q-field 
                :error="$v.enterRoleForm.name.$error"
                error-label="审批人不能为空"
                class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <q-select
                  :float-label="$t('审批人')"
                  filter
                  filter-placeholder="输入查询"
                  :options="roleOptions"
                  @blur="$v.enterRoleForm.name.$touch"
                  v-model="enterRoleForm.name"></q-select>
              </q-field>
            </q-card-main>
          </q-card>
          <q-toolbar slot="footer" color="white" class="row justify-end">
            <q-btn
              flat
              color="primary"
              @click="enterRoleAddOrEditModal = false">{{$t("取消")}}</q-btn>
            <q-btn
              flat
              :loading="btnLoading"
              color="primary"
              v-if="addOrEdit == 0"
              @click="saveAddEnterRoleHandler">{{$t("保存")}}</q-btn>
            <q-btn
              flat
              :loading="btnLoading"
              color="primary"
              v-else-if="addOrEdit == 1"
              @click="saveEditEnterRoleHandler">{{$t("保存")}}</q-btn>
            <q-btn
              flat
              :loading="btnLoading"
              color="primary"
              v-else
              @click="saveInsertEnterRoleHandler">{{$t("保存")}}</q-btn>
          </q-toolbar>
        </q-modal-layout>
      </q-modal>
    </div>
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- babel for es6 transform -->
    <!-- <script src="lib/js/babel.min.js"></script> -->
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sop/supplierClassify.js"></script>

    <script>
      // quasar components i18n
      Quasar.i18n.set(Quasar.i18n[LANGUGE])

      Vue.use(window.vuelidate.default)
      var minLength = window.validators.minLength
      var helpers = window.validators.helpers
      var required = window.validators.required
      var email = window.validators.email
      var mustNumber = function(value) {
        return /^[0-9]+$/.test(value) || !helpers.req(value)
      }

      var supplierClassify = new Vue({
        el: '#q-supplierClassify',
        i18n: i18n,
        data: function() {
          return {
            btnLoading: false,
            addOrEdit: 0,
            // tab
            selectedTab: '1',
            tabData: [],
            tabAddOrEditModal: false,
            tabAddOrEditForm: {
              name: ''
            },
            // tree
            addLevel: '', // 新增哪一级
            searchNodes: '', // 查询节点
            visible: false, // tree loading
            supplierLevelData: [
              {
                label : "全部任务",
                value : "0",
                header : "right",
                children : []
              }
            ], // 树的节点数据
            expandedNodes: ['0'], // 展开的节点
            nodeSelected: '', // 当前左键单击的节点
            nodeTicked: [], // 勾选的节点
            currentNodeId: '', // 当前右键点击的节点
            nodeAddModal: false,
            nodeEditModal: false,
            nodeAddForm: {
              name: ''
            },
            nodeEditForm: {
              name: '',
              arraynumber: ''
            },
            // form
            taskTypeOptions: [
              {
                label: '无',
                value: 1
              },
              {
                label: '调查表',
                value: 2
              },
              {
                label: '评分表',
                value: 3
              },
              {
                label: '上传交付物',
                value: 4
              }
            ],
            roleOptions: [], // 执行人
            infoForm: {  
              taskType: '',
              taskRules: '',
              responsibles: [],
              accountable: [],
              consulted: [],
              informed: []
            },
            steps: [], // 审批流程
            enterRoleAddOrEditModal: false,
            enterRoleForm: { // 新增 or 编辑 审批人
              name: ''
            },
            roleEditOrInsertFlag: '',  // 修改审批人的标识
            editIndex: Number
          }
        },
        validations: {
          tabAddOrEditForm: {
            name: { required: required }
          },
          nodeAddForm: {
            name: { required: required }
          },
          nodeEditForm: {
            name: { required: required },
            arraynumber: { required: required, mustNumber: mustNumber }
          },
          enterRoleForm: {
            name: { required: required }
          }
        },
        computed: {
         
        },
        watch: {
          nodeSelected: function(nodeSelected) {
            if (nodeSelected != 0 && nodeSelected != null) {
              this.getFormData()
            }
          },
          'infoForm.responsibles': function(responsibles) {
          }
        },
        created: function() {
          this.getRoleData()
          this.getTabData()
        },
        methods: {
          // Tab 的
          getTabData: function() {
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/stage/getall',
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.tabData = data.rows
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
            })
            .catch(function(err) {

            })
          },
          openAddTabModal: function() {
            this.tabAddOrEditModal = true
            this.tabAddOrEditForm = {
              name: ''
            }
            this.$v.tabAddOrEditForm.$reset()
            this.addOrEdit = 0
          },
          openEditTabModal: function () {
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/classifyTypeName/findClassifyTypeName',
              data: {
                id: this.selectedTab
              }
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.addOrEdit = 1
                that.tabAddOrEditForm = {
                  name: data.single.name
                }
                that.tabAddOrEditModal = true
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          saveAddTabHandler: function () {
            this.$v.tabAddOrEditForm.$touch()
            if (!this.$v.tabAddOrEditForm.$error) {
              this.btnLoading = true
              var that = this
              axios({
                method: 'post',
                url: '/manager/new/classifyTypeName/addclassifyTypeList',
                data: {
                  name: this.tabAddOrEditForm.name,
                  type: 2
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.$q.notify({
                    message: that.$t('新增成功'),
                    icon: 'done',
                    type: 'positive',
                    position: 'top-right'
                  })
                  
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
                that.btnLoading = false
                that.tabAddOrEditModal = false
                that.getTabData()
              })
              .catch(function(err) {
                console.log(err)
              })
            }
          },
          saveEditTabHandler: function () {
            this.$v.tabAddOrEditForm.$touch()
            if (!this.$v.tabAddOrEditForm.$error) {
              var that = this
              this.btnLoading = true
              axios({
                method: 'post',
                url: '/manager/new/classifyTypeName/updateClassifyType',
                data: {
                  id: this.selectedTab,
                  name: this.tabAddOrEditForm.name,
                  type: 2
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.$q.notify({
                    message: '编辑成功',
                    icon: 'done',
                    type: 'positive',
                    position: 'top-right'
                  })
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
                that.btnLoading = false
                that.tabAddOrEditModal = false
                that.getTabData()
              })
              .catch(function(err) {
                console.log(err)
              })
            }
          },
          deleteTabComfirm: function() {
            var that = this
            this.$q.dialog({
              title: this.$t('确认')+'？',
              message: this.$t('您确定要当前Tab吗')+'？',
              ok: {
                label: this.$t('确认'),
                flat: true
              },
              cancel: {
                label: this.$t('取消'),
                flat: true
              }
            })
            .then(function() {
              axios({
                method: 'post',
                url: '/manager/new/classifyTypeName/deleteclassifyTypeList',
                data: {
                  ids: that.selectedTab,
                  type: 1
                }
              })
              .then(function(data) {
                console.log(data)
                if (data.statusCode == 200) {
                  that.getTabData()
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
              })
              .catch(function(err) {

              })
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 节点的
          getTreeData: function(tab) {
            this.visible = true
            this.nodeSelected = ''
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/classifyCustom/tree2/' + tab + '/2'
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.supplierLevelData[0].children = data.rows
                // 处理数据 取消根节点新增、删除
                var _arrRoot = []
                var _arrFirst = []
                that.supplierLevelData.map(function(item) {
                  item.isRoot = true
                  _arrRoot.push(item)
                })
                that.supplierLevelData = _arrRoot
                that.supplierLevelData[0].children.map(function(item) {
                  item.isFirst = true
                  _arrFirst.push(item)
                })
                that.supplierLevelData[0].children = _arrFirst
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
              that.visible = false
            })
            .catch(function(err) {

            })
          },
          openAddLevelModal: function(currentLevel, addLevel) {
            console.log(currentLevel)
            this.nodeAddForm = {
              name: ''
            }
            this.$v.nodeAddForm.$reset()
            this.addOrEdit = 0
            this.nodeAddModal = true
            this.currentNodeId = currentLevel.value
            this.addLevel = addLevel
          },
          saveAddNodeHandler: function() {
            this.$v.nodeAddForm.$touch()
            if (!this.$v.nodeAddForm.$error) {
              this.btnLoading = true
              var that = this
              axios({
                method: 'post',
                url: '/manager/new/classifyCustom/addClassifyCustom',
                data: {
                  id: this.currentNodeId,
                  currentlyId: this.currentNodeId, 
                  currentlyType: this.addLevel,
                  type: 2,
                  typeNameId: this.selectedTab,  // 当前tab
                  name: this.nodeAddForm.name
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.$q.notify({
                    message: that.$t('新增成功'),
                    icon: 'done',
                    type: 'positive',
                    position: 'top-right'
                  })
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
                that.btnLoading = false
                that.nodeAddModal = false
                that.getTreeData(that.selectedTab)
              })
              .catch(function(err) {

              })
            }
          },
          openEditLevelModal: function(currentLevel) {
            this.currentNodeId = currentLevel.value
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/classifyCustom/byId',
              data: {
                id: currentLevel.value
              }
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.addOrEdit = 1
                that.nodeEditForm = {
                  name: data.single.name,
                  arraynumber: data.single.arraynumber
                }
                that.nodeEditModal = true
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          saveEditNodeHandler: function() {
            this.$v.nodeEditForm.$touch()
            if (!this.$v.nodeEditForm.$error) {
              this.btnLoading = true
              var that = this
              axios({
                method: 'post',
                url: '/manager/new/classifyCustom/updateClassifyCustom',
                data: {
                  id: this.currentNodeId,
                  name: this.nodeEditForm.name,
                  arraynumber: this.nodeEditForm.arraynumber
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.$q.notify({
                    message: that.$t('修改成功'),
                    icon: 'done',
                    type: 'positive',
                    position: 'top-right'
                  })
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
                that.btnLoading = false
                that.nodeEditModal = false
                that.getTreeData(that.selectedTab)
              })
              .catch(function(err) {

              })
            }
          },
          deleteNodeComfirm: function(currentLevel) {
            var that = this
            this.$q.dialog({
              title: this.$t('确认')+'？',
              message: this.$t('您确定要删除该节点吗')+'？',
              ok: {
                label: this.$t('确认'),
                flat: true
              },
              cancel: {
                label: this.$t('取消'),
                flat: true
              }
            })
            .then(function() {
              axios({
                method: 'post',
                url: '/manager/new/classifyCustom/deleteClassifyCustom',
                data: {
                  ids: currentLevel.value,
                  type: 1
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.$q.notify({
                    message: '删除成功!',
                    icon: 'done',
                    type: 'positive',
                    position: 'top-right'
                  })
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
                that.getTreeData(that.selectedTab)
              })
              .catch(function(err) {
                console.log(err)
              })
            })
            .catch(function() {
              // 选择"Cancel"或作了关闭操作
            })
          },
          // 表单的
          // TODO:  测试接口可用？
          getRoleData: function() {
            this.roleOptions = []
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/roleGroup/getRoleGroupList'
            })
            .then(function(data) {
              data.map(function(item) {
                var _obj = {}
                _obj.label = item.name
                _obj.value = item.id
                that.roleOptions.push(_obj)
              })
            })
            .catch(function(err) {

            })
          },
          getFormData: function() {
            this.infoForm = {  
              taskType: '',
              taskRules: '',
              responsibles: [],
              accountable: [],
              consulted: [],
              informed: []
            }
            this.steps = []
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/classifyCustom/getProcessSetting',
              data: {
                id: this.nodeSelected
              }
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.infoForm.taskType = data.single.taskType
                that.infoForm.taskRules = data.single.taskRules
                data.single.responsibles.map(function(item) {
                  that.infoForm.responsibles.push(item.roleGroupId)
                })
                data.single.consulted.map(function(item) {
                  that.infoForm.consulted.push(item.roleGroupId)
                })
                data.single.informed.map(function(item) {
                  that.infoForm.informed.push(item.roleGroupId)
                })
                data.single.accountable.map(function(item) {
                  that.steps.push(item.roleGroupName)
                })
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
            })
            .catch(function(err) {
              console.log(err, '获取Form数据时捕获到异常')
            })
          },
          // TODO: 过滤已选择的审批人数据
          // 表单下 前端新增审批人
          openAddEnterRoleModal: function() {
            this.addOrEdit = 0
            this.enterRoleForm = {
              name: ''
            }
            this.$v.enterRoleForm.$reset()
            this.enterRoleAddOrEditModal = true
          },
          saveAddEnterRoleHandler: function() {
            var that = this
            this.$v.enterRoleForm.$touch()
            if (!this.$v.enterRoleForm.$error) {
              this.roleOptions.map(function(item) {
                if (that.enterRoleForm.name == item.value) {
                  that.steps.push(item.label)
                }
              })
              this.enterRoleAddOrEditModal = false
            }
          },
          // 表单下 前端编辑审批人
          openEditEnterRoleModal: function(step, ind) {
            var that = this
            this.addOrEdit = 1
            this.roleOptions.map(function(item) {
              if (item.label == step) {
                that.enterRoleForm.name = item.value
                that.roleEditOrInsertFlag = step // 标记当前被修改的是哪一条数据
                that.editIndex = ind
              }
            })
            this.enterRoleAddOrEditModal = true
          },
          saveEditEnterRoleHandler: function() {
            var that = this
            this.$v.enterRoleForm.$touch()
            if (!this.$v.enterRoleForm.$error) {
              // 替换掉当前被编辑的审批人  换成新选择的
              var _arr = []
              this.steps.map(function(item, index) {
                if (that.roleEditOrInsertFlag != item) {
                  _arr.push(item)
                } else {
                  if (that.editIndex != index) {
                    _arr.push(item)
                  } else {
                    that.roleOptions.map(function(item2) {
                      if (that.enterRoleForm.name == item2.value) {
                        _arr.push(item2.label)
                      } 
                    })
                  }
                }
              })
              this.steps = _arr
              this.enterRoleAddOrEditModal = false
            }
          },
          // 表单下 向下插入审批人
          openInsertEnterRoleModal: function(step) {
            this.addOrEdit = 2
            this.roleEditOrInsertFlag = step
            this.enterRoleForm = {
              name: ''
            }
            this.$v.enterRoleForm.$reset()
            this.enterRoleAddOrEditModal = true
          },
          saveInsertEnterRoleHandler: function() {
            var that = this
            this.$v.enterRoleForm.$touch()
            if (!this.$v.enterRoleForm.$error) {
              var _index 
              this.steps.map(function(item, index) {
                if (that.roleEditOrInsertFlag == item) {
                  _index = index
                }
              })
              this.roleOptions.map(function(item) {
                if (that.enterRoleForm.name == item.value) {
                  that.steps.splice(_index, 0, item.label)
                }
              })
              this.enterRoleAddOrEditModal = false
            }
          },
          // 表单下 删除审批人
          deleteEnterRoleConfirm: function(step, ind) {
            var that = this
            this.$q.dialog({
              title: this.$t('确认')+'？',
              message: this.$t('您确定要在审批流程中移除当前审批人吗')+'？',
              ok: {
                label: this.$t('确认'),
                flat: true
              },
              cancel: {
                label: this.$t('取消'),
                flat: true
              }
            })
            .then(function() {
              var _arr = []
              that.steps.map(function(item, index) {
                if (step != item) {
                  _arr.push(item)
                } else {
                  if (ind != index) {
                    _arr.push(item)
                  }
                }
              })
              that.steps = _arr
            })
            .catch(function() {
              // 选择"Cancel"或作了关闭操作
            })
          },
          // 提交
          submitHandler: function() {
            // 组装 后台所需数据
            var responsibles_arr = []
            // var accountable_obj = {}, accountable_arr = []
            var consulted_arr = []
            var informed_arr = []
            var steps_arr = []
            var that =this
            this.roleOptions.map(function(item) {
              var responsibles_obj = {}
              var consulted_obj = {}
              var informed_obj = {}
              that.infoForm.responsibles.map(function(item2) {
                if (item.value == item2) {
                  responsibles_obj.roleGroupId = item.value
                  responsibles_obj.roleGroupName = item.label
                  responsibles_arr.push(responsibles_obj)
                }
              })
              that.infoForm.accountable.map(function(item2) {
                if (item.value == item2) {
                  accountable_obj.roleGroupId = item.value
                  accountable_obj.roleGroupName = item.label
                  accountable_arr.push(accountable_obj)
                }
              })
              
              that.infoForm.consulted.map(function(item2) {
                if (item.value == item2) {
                  consulted_obj.roleGroupId = item.value
                  consulted_obj.roleGroupName = item.label
                  consulted_arr.push(consulted_obj)
                }
              })
              that.infoForm.informed.map(function(item2) {
                if (item.value == item2) {
                  informed_obj.roleGroupId = item.value
                  informed_obj.roleGroupName = item.label
                  informed_arr.push(informed_obj)
                }
              })
            })
            this.steps.map(function(item2) {
              var steps_obj = {}
              that.roleOptions.map(function(item) {
                if (item.label == item2) {
                  steps_obj.roleGroupId = item.value
                  steps_obj.roleGroupName = item.label
                  steps_arr.push(steps_obj)
                }
              })
            })
            axios({
              method: 'post',
              url: '/manager/new/classifyCustom/processSetting',
              // headers: { 'Content-Type': 'application/json;charset=utf-8'},
              data: {
                id: this.nodeSelected,
                taskType: this.infoForm.taskType,
                taskRules: this.infoForm.taskRules,
                responsiblesString: JSON.stringify(responsibles_arr),
                accountableString: JSON.stringify(steps_arr),
                consultedString: JSON.stringify(consulted_arr),
                informedString: JSON.stringify(informed_arr)
              }
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.getFormData()
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
            })
            .catch(function(err) {
              console.log(err, '提交表单时捕获到异常');
            })
          }
        }
      })
    </script>
  </body>
</html>